<template>
  <view class="calendar_containter">
    <view class="containter">
      <view class="dayun-box gray">
        <view class="dayun-item-title">
          <view class="dayun-info-title">岁&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年:</view>
        </view>
        <template v-for="(item,index) in dayun">
          <view class="dayun-item" :key="index">
            <view class="dayun-info">{{item.startAge}}岁</view>
          </view>
        </template>
      </view>
      <view class="dayun-box">
        <view class="dayun-item-title">
          <view class="dayun-info-title">大运始于:</view>
        </view>
        <template v-for="(item,index) in dayun">
          <view class="dayun-item" :key="index">
            <view class="dayun-info">{{item.startYear}}</view>
          </view>
        </template>
      </view>
      <view class="dayun-box gray">
        <view class="dayun-item-title">
          <view class="dayun-info-title">天干十神:</view>
        </view>
        <template v-for="(item,index) in dayun">
          <view class="dayun-item" :key="index">
            <view class="dayun-info">
              {{item.shiShen[0]}}
            </view>
          </view>
        </template>
      </view>
      <view class="dayun-box">
        <view class="dayun-item-title">
          <view class="dayun-info-title">大&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;运:</view>
        </view>
        <template v-for="(item,index) in dayun">
          <view class="dayun-item red" :key="index">
            <view class="dayun-info">
              {{item.ganZhi}}
            </view>
          </view>
        </template>
      </view>
      <view class="dayun-box gray">
        <view class="dayun-item-title">
          <view class="dayun-info-title">地支十神:</view>
        </view>
        <template v-for="(item,index) in dayun">
          <view class="dayun-item" :key="index">
            <template v-for="(e, i) in item.cangGanArr">
              <view class="dayun-info dayun-info-dizhi">
                {{e}}
              </view>
              <view class="dayun-info dayun-info-dizhishishen">
                <view v-for="(k, m) in item.cangGanShiShen[i]">
                  {{ k }}
                </view>
                <!-- {{item.cangGanShiShen[i]}} -->
              </view>
            </template>
          </view>
        </template>
      </view>
      <view class="dayun-box">
        <view class="dayun-item-title">
          <view class="dayun-info-title">十二长生:</view>
        </view>
        <template v-for="(item,index) in dayun">
          <view class="dayun-item" :key="index">
            <view class="dayun-info">
              {{item.diShi}}
            </view>
          </view>
        </template>
      </view>
      <view class="dayun-box gray">
        <view class="dayun-item-title">
          <view class="dayun-info-title">大运止于:</view>
        </view>
        <template v-for="(item,index) in dayun">
          <view class="dayun-item" :key="index">
            <view class="dayun-info">
              {{item.endYear}}
            </view>
          </view>
        </template>
      </view>
      <view class="dayun-box">
        <view class="dayun-item-title">
          <view class="dayun-info-title">流&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年:</view>
        </view>
        <template v-for="(item,index) in dayun">
          <view class="dayun-item" :key="index">
            <template v-for="(e, i) in item.customLiuNian">
              <view class="dayun-info">
                <span :class="[i < 5 ? 'blue' : '',]">{{e.ganZhi[0]}}</span>
                <span :class="[i >= 5 ? 'blue' : '',]">{{e.ganZhi[1]}}</span>
              </view>
            </template>
          </view>
        </template>
      </view>
    </view>
  </view>
</template>
<script>
  import wuxingColor from '@/utils/wuxing.js'
  export default {
    props: {
      result: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {
        baziResult: this.result,
        dayun: [],
        dayunIndex: 0
      }
    },
    mounted() {
      this.$nextTick(() => {
        // 补全行个数
        let dayunTem = JSON.parse(JSON.stringify(this.baziResult.daYun));
        dayunTem.shift();
        for(let item of dayunTem) {
          item['cangGanArr'] = item.cangGan.split(',')
        }
        this.dayun = dayunTem;
      })
    },
    methods: {
      // 对应五行信息
      fiveElementInfo(str) {
        let {
          color
        } = wuxingColor.getJiuLongGanzhiWuxingColorInfo(str);
        return `color: ${color}`
      }
    }
  };
</script>

<style lang="scss" scoped>
  .blue {
    color: blue;
  }
  .red {
    color: red;
  }
  .gray {
    background-color: rgb(204, 204, 204);
  }
  .calendar_containter {
    width: 100%;
    box-sizing: border-box;
    font-weight: bold;
    background-color: rgb(238, 238, 238);
  }
  .dayun-box {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    
    .dayun-item-title {
      flex: 1 0;
      .dayun-info-title {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 14rpx 4rpx 14rpx 8rpx;
        box-sizing: border-box;
        white-space: nowrap;
        flex-shrink: 0;
        flex-grow: 1;
      }
    }
    .dayun-item {
      display: flex;
      flex: 1 1;
      min-width: 0;
      flex-direction: column;
      align-items: center;
      box-sizing: border-box;

      .dayun-info {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 14rpx 12rpx;
        box-sizing: border-box;
        white-space: nowrap;

        .dayun-ele {
          display: flex;
          flex-direction: row;
          line-height: 44rpx;

          .dayun-ganzhi {
            font-size: 40rpx;
            padding-right: 4rpx;
          }

          .dayun-shishen {
            font-size: 20rpx;
            color: #4B240D;
          }
        }
      }
      .dayun-info-dizhi {
        padding-bottom: 0;
      }
      .dayun-info-dizhishishen {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 2rpx;
        line-height: 30rpx;
      }
    }
  }
</style>